<template>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner, index) in banners" :key="index">
            <van-image :src="proxyImageUrl(banner.img)" class="banner"
                @click="goToDetail(getComicId(banner))"></van-image>
        </van-swipe-item>
    </van-swipe>
</template>
<script setup>
import { fetchBanner } from '@/api/index'
import { ref, onMounted, inject } from 'vue'
import { proxyImageUrl } from "@/tool/index"
import { useRouter } from "vue-router"
const router = useRouter()
const banners = ref([])

const registerComponentLoad = inject('registerComponentLoad', () => { })


onMounted(async () => {
    try {
        const res = await fetchBanner()
        if (res.code === 0) {
            banners.value = res.data
        }
    } catch (error) {
        console.error("Banner加载失败:", error)
    } finally {

        registerComponentLoad()

    }
})
const getComicId = (banner) => {
    return banner.jump_value.split('/').pop()
};
const goToDetail = (id) => {
    router.push({ path: `/detail/${id}` })
};
</script>
<style scoped lang="scss">
.my-swipe {
    margin-bottom: 20px;

    .banner {
        width: 100%;
    }
}
</style>